// item 上下结构样式
<template>
  <view>
    <view class="book-list">
      <view class="book-item" v-for="(item, index) in list" :key="index" @click="$util.goUrl(`/pages/videoDetail?id=${item.id}`)">
        <!-- <view class="collect flex-center" @click.stop="collect(item)">
          <view class="iconfont iconweidianzhongdeaixin"></view>
        </view> -->
        <image class="img" :src="item.titleImgUrl" mode="aspectFill" />
        <view class="con">
          <view class="tit ellipsis">{{ ["全部", "农业百科", "春耕课程", "鲜果农技"][item.knowledgeTypeId] }}</view>
          <view class="desc ellipsis">{{ item.title }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import utils from "@/utils/util.js";
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    collect: utils.throttle(function (item) {
      this.$toast("收藏成功");
    }, 500),
  },
};
</script>

<style lang="scss" scoped>
.book-list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 32rpx;
}
.book-item {
  position: relative;
  width: 324rpx;
  margin-right: 34rpx;
  margin-bottom: 20rpx;
  border-radius: 14rpx;
  overflow: hidden;
  background: #fff;
  .con {
    padding: 10rpx 20rpx;
  }
  .tit {
    font-size: 32rpx;
    color: #4a4a4a;
    line-height: 56rpx;
    font-weight: 600;
  }
  .desc {
    height: 40rpx;
    font-size: 24rpx;
    color: #8e93a1;
    line-height: 40rpx;
  }
  .img {
    width: 100%;
    height: 200rpx;
    background: #eee;
  }
  .collect {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    z-index: 1;
    width: 64rpx;
    height: 64rpx;
    background: rgba(18, 25, 35, 0.15);
    border-radius: 20rpx;
    font-size: 27rpx;
    color: #fff;
    &.active {
      color: #ff2d55;
    }
  }
}
</style>
